<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>查询兼职</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

<!-- 用id=app 指明vue作用域-->
<div id="head">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
            <template slot="title" >个人中心</template>
            <el-menu-item index="2-1" @click="myInfo">个人信息</el-menu-item>
            <el-menu-item index="2-2" @click="myResume">我的简历</el-menu-item>
            <el-menu-item index="2-3" @click="myJob">报名兼职</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">账号管理</template>
                <el-menu-item index="2-4-1">退出登录</el-menu-item>
                <el-menu-item index="2-4-2">修改密码</el-menu-item>
                <el-menu-item index="2-4-3">退出登录</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3"  v-bind:disable="isLogin">消息中心</el-menu-item>
        <el-menu-item index="4" @click="contact">联系我们</el-menu-item>
    </el-menu>
</div>

<div id="query">
    <div>
        <el-select :span="5" v-model="query.jobType" size="mini" placeholder="兼职类型">
            <el-option
                    v-for="item in jobTypes"
                    :label="item"
                    :value="item">
            </el-option>
        </el-select>
        <el-select :span="5" v-model="query.jobPlace" size="mini" placeholder="地区">
            <el-option
                    v-for="item in jobPlace"
                    :label="item"
                    :value="item">
            </el-option>
        </el-select>
        <el-date-picker size="mini" type="date" placeholder="工作开始日期" v-model="query.jobStart"></el-date-picker>
        <el-input :span="5" type="number" size="mini" style="width:200px"
                  v-model.number="query.salary" placeholder="最低薪资"></el-input>

        <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="jobType" label="兼职类型" width="150">
            </el-table-column>
            <el-table-column prop="salary" label="薪资" width="150">
            </el-table-column>
            <el-table-column prop="jobStart" label="开始时间" width="150">
            </el-table-column>
            <el-table-column prop="salaryMode" label="结算方式" width="150">
            </el-table-column>
            <el-table-column prop="id" label="详情" width="150"><a href="https://www.baidu.com">详情</a></el-table-column>
            <el-table-column prop="recruitmentPlace" label="地区" width="150"></el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total1" @current-change="getData"
                       :current-page.sync="page">
        </el-pagination>
        <el-divider></el-divider>
        <el-button type="primary" icon="el-icon-search" @click="sortJobsBySalary">按薪资排序</el-button>

    </div>
</div>
<div id="login">
    <template>
        <div>
            <el-button @click="dialogFormVisible = true">登录</el-button>
            <el-dialog title="登录" :visible.sync="dialogFormVisible" @closed="handleClose">
                <el-form :model="user" :rules="rules" ref="ruleForm">
                    <el-form-item label="账号" :label-width="formLabelWidth">
                        <el-input v-model="user.studentId" placeholder="初始账号为学号" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="user.password" placeholder="初始密码为000000" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="login">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
    <el-link href="swagger-ui.html" type="success">所有接口</el-link>

</div>
<div id="other">
</div>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<script src="js/axios.js"></script>
<script src="js/login.js"></script>
<script src="js/head.js"></script>
<script src="js/query.js"></script>


</body>
</html>